<template>
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>

    <p>{{ count }}</p>
    <button @click="modify">修改count</button>
</template>

<script setup>
import { reactive, ref } from 'vue'

/**
 * reactive用法
 */
// 普通对象，不具有响应式
// var user = {
//     name: 'tom',
//     age: 18
// }

// 创建响应式数据对象，一个代理对象
const user = reactive({
    name: 'tom',
    age: 18
})
const change = function (){
    // console.log(this) // 无法访问this，也不需要访问
    user.name = 'alice'
    console.log(user.name)
}

/**
 * ref用法
 */
const count = ref(0) // 返回一个个响应式数据对象 {value: 0}
const modify = function(){
    count.value++
}

</script>

<style scoped>

</style>